<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-04-06 17:14:11
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-10-18 10:31:07
 * @Description:
 *
-->

<template>
  <div class="res-card-ctn">
    <div class="title">资源卡片</div>
    <div class="content">
      <div class="top">
        <div class="line left"></div>
        <div class="line right"></div>
        <div class="text">切换资源卡片</div>
        <div
          v-for="(item, index) in resCard"
          :key="index"
          :class="['item', actives.includes(index) ? 'active' : '']"
          @click="cardClick(index)"
        >
          {{ item.name }}
        </div>
      </div>
      <div v-for="(card, index) in activeResCard" :key="index" class="card">
        <div class="c-title">
          <div class="text">{{ card.name }}</div>
          <div class="num">
            <span class="normal">{{ card.normalCnt }}</span>/{{ card.totalCnt }}
          </div>
        </div>
        <div class="c-content">
          <el-carousel
            :height="card.name === '虚拟机' ? '150px' : '130px'"
            :autoplay="true"
            :interval="3000"
            arrow="never"
          >
            <el-carousel-item
              v-for="viewItemGroup in Math.ceil(card.viewItems.length / 2)"
              :key="viewItemGroup"
            >
              <div class="viewItemGroup">
                <div
                  v-for="(viewItem, vidx) in card.viewItems.slice(
                    (viewItemGroup - 1) * 2,
                    (viewItemGroup - 1) * 2 + 2
                  )"
                  :key="vidx"
                  class="viewItem"
                  @click="
                    viewItemClick(
                      index,
                      (viewItemGroup - 1) * 2 + vidx,
                      viewItem
                    )
                  "
                >
                  <div class="line left"></div>
                  <div class="line right"></div>
                  <div class="provider">
                    <img
                      class="img"
                      :src="getProviderIcon(viewItem.cloudProvider)"
                    />
                    <div class="text">{{ viewItem.cloudProvider }}</div>
                  </div>
                  <div v-if="viewItem.items.length > 0" class="items">
                    <div
                      v-for="(item, itemIndex) in viewItem.items"
                      :key="itemIndex"
                      class="item"
                    >
                      <div class="key">
                        {{ item.key.replace("安全组规则数量", "规则数量") }}
                      </div>
                      <div class="value">
                        {{ item.val }}{{ item.unit || "" }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ResCard',
  props: {
    resCard: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      actives: [0, 1, 2]
    }
  },
  computed: {
    /**
     * @description: 展示的资源卡片
     * @return {*}
     */
    activeResCard() {
      const arr = []
      for (const activeIndex of this.actives) {
        if (activeIndex >= 0 && activeIndex < this.resCard.length) {
          arr.push(this.resCard[activeIndex])
        }
      }
      return arr
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    /**
     * @description: 资源卡片点击
     * @param {*} cardIndex
     * @param {*} viewItemIndex
     * @param {*} viewItem
     * @return {*}
     */
    viewItemClick(cardIndex, viewItemIndex, viewItem) {
      this.$router.push({
        path: '/monitor/cn-resource/stats',
        query: {
          activeTab: '资源视图'
        }
      })
    },
    /**
     * @description:
     * @param {*} cloudProvider
     * @return {*}
     */
    getProviderIcon(cloudProvider) {
      if (cloudProvider === '阿里云') {
        return require('@/assets/imgs/situation/icon_provider_aliyun.png')
      } else if (cloudProvider === '华为云') {
        return require('@/assets/imgs/situation/icon_provider_huawei.png')
      } else if (cloudProvider === '腾讯云') {
        return require('@/assets/imgs/situation/icon_provider_tencent.png')
      } else if (cloudProvider === 'Openstack') {
        return require('@/assets/imgs/situation/icon_provider_openstack.png')
      } else if (cloudProvider === '浪潮InCloud') {
        return require('@/assets/imgs/situation/icon_provider_inspur.png')
      } else {
        return ''
      }
    },
    /**
     * @description: 资源卡片点击
     * @param {*} index
     * @return {*}
     */
    cardClick(index) {
      const idx = this.actives.indexOf(index)
      if (idx >= 0) {
        this.actives.splice(idx, 1)
      } else {
        if (this.actives.length >= 3) {
          this.$message.info({
            message: '最多只可显示三种资源卡片',
            duration: 2000
          })
          return
        } else {
          this.actives.push(index)
        }
      }
      this.actives.sort()
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.res-card-ctn {
  width: 494px;

  .title {
    width: 494px;
    height: 28px;
    line-height: 28px;
    background: url("~@/assets/imgs/situation/bg_title_normal.png") no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-left: 25px;
    .textStyle(16px , 600, #03d3ff);
  }

  .content {
    margin-top: 7px;
    box-sizing: border-box;
    padding-top: 20px;
    height: 625px;
    background: linear-gradient(
      351deg,
      rgba(52, 85, 120, 0.37) 0%,
      rgba(19, 61, 91, 0.35) 100%
    );

    .top {
      margin: 0 auto;
      width: 453px;
      height: 40px;
      background: rgba(54, 78, 120, 0.84);
      box-sizing: border-box;
      padding: 0 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;

      .line {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 5px;
        box-shadow: 0px 0px 4px 0px rgba(41, 56, 86, 0.5);
        border: 1px solid rgba(196, 222, 242, 0.67);
        &.left {
          left: 0;
          border-right: none;
        }
        &.right {
          right: 0;
          border-left: none;
        }
      }

      .text {
        .textStyle(12px , 500, #B0CFE8);
      }

      .item {
        box-sizing: border-box;
        padding: 0 7px;
        height: 20px;
        background: rgba(0, 107, 192, 0.3);
        border: 1px solid #0187d9;
        border-radius: 1px;
        .textStyle(12px , 600, #018ce7);
        line-height: 18px;
        cursor: pointer;

        &.active {
          background: rgba(0, 121, 221, 0.4);
          box-shadow: 0px 0px 4px 0px rgba(67, 227, 225, 0.3);
          border: 1px solid #03cdff;
          .textStyle(12px , 600, #30c0ff);
          text-shadow: 0px 0px 4px rgba(67, 227, 225, 0.3);
        }
      }
    }

    .card {
      margin: 22px auto 0;
      width: 453px;
      .c-title {
        width: 453px;
        height: 25px;
        background: url("~@/assets/imgs/situation/bg_title_child.png") no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: space-between;

        .text {
          .textStyle(16px , 600, #03d3ff);
          line-height: 22px;
          margin-left: 24px;
        }

        .num {
          .textStyle(20px , 400, #03f9ff);
          line-height: 22px;
          font-family: "DIGITAL-Regular";
          .normal {
            color: #86fe06;
          }
        }
      }
      .c-content {
        width: 453px;
        min-height: 130px;
        background: linear-gradient(
          183deg,
          rgba(83, 128, 189, 0.22) 0%,
          rgba(49, 71, 110, 0.3) 100%
        );

        /deep/ .el-carousel__button {
          width: 6px;
          height: 6px;
          background: #619abf;
          border-radius: 50%;
        }
        /deep/ .el-carousel__indicator.is-active button {
          background: #03d3ff;
        }
      }
      .viewItemGroup {
        margin-top: 16px;
        height: calc(100% - 48px);
        box-sizing: border-box;
        padding: 0 9px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .viewItem {
          width: 212px;
          height: 100%;
          box-sizing: border-box;
          padding: 15px 10px 0;
          background: rgba(51, 77, 122, 0.84);
          position: relative;
          cursor: pointer;

          .line {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 5px;
            box-shadow: 0px 0px 4px 0px rgba(41, 56, 86, 0.5);
            border: 1px solid rgba(196, 222, 242, 0.67);
            &.left {
              left: 0;
              border-right: none;
            }
            &.right {
              right: 0;
              border-left: none;
            }
          }
          .provider {
            height: 24px;
            background: rgba(59, 89, 141, 0.84);
            display: flex;
            align-items: center;
            justify-content: center;

            .img {
              height: 17px;
            }
            .text {
              margin-left: 6px;
              .textStyle(14px , 500, #03d3ff);
            }
          }
          .items {
            margin-top: 6px;
            display: flex;
            flex-direction: row;
            align-items: center;
            flex-wrap: wrap;

            .item {
              width: 50%;
              display: flex;
              flex-direction: row;
              align-items: center;
              margin-top: 6px;

              .key {
                min-width: 60px;
                text-align: right;
                margin-right: 8px;
                .textStyle(12px , 500, #7b9cb8);
                height: 17px;
                line-height: 17px;
              }
              .value {
                .textStyle(12px , 500, #DBF1FF);
                line-height: 17px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
